<script setup lang="ts">
import {onMounted, ref} from "vue";
import filterComponentPro from "@/components/filterComponentPro/index.vue";
import tableComponent from '@/components/tableComponent/index.vue'
import {getcompanyapi} from "@/api/api";
import CustomerSureDia from "@/views/approval/components/customer-sure-dia.vue";
import {processPassApi, queryCompanyProcessRecordApi} from "@/api/customer-approval";
import type {ListDto} from "@/api/customer-approval/type";
import dayjs from "dayjs";
import {ElMessageBox, ElMessage} from "element-plus";

const filterData = ref({
    list: {
        // companyName: {
        //     width: 200,
        //     name: '客户名称',
        //     prop: 'companyId',
        //     value: '',
        //     placeholder: '请输入公司名称',
        //     type: 'inputSelect',
        //     options: [],
        //     defaultAttrs: {
        //         label: 'companyName',
        //         value: 'companyName'
        //     },
        //     remoteMethod: async (val: any, i: any) => {
        //         if (val) {
        //             i.options = await getcompanyapi(val)
        //         }
        //     }
        // },
        companyName: {
            name: '客户名称',
            prop: 'companyName',
            value: '',
            placeholder: '请输入客户名称',
            type: 'input',
            inputType: 'text'
        },
        applyUserName: {
            name: '申请人',
            prop: 'applyUserName',
            value: '',
            placeholder: '请输入申请人',
            type: 'input',
            inputType: 'text'
        },
        applyTime: {
            name: '申请时间',
            prop: 'applyTime',
            value: [],
            placeholder: '',
            endPlaceholder: '结束时间',
            startPlaceholder: '开始时间',
            type: 'date',
            dateType: 'daterange',
            valueFormat: 'YYYY-MM-DD',
        },
    }
})
const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const tableHeader = ref([
    {
        label: '客户名称',
        prop: 'companyName',
        width: 200
    },
    {
        label: '证件地址',
        prop: 'address',
        width: 200
    },
    {
        label: '是否重复',
        prop: 'isRepeat',
        width: 200,
        map: {
            0: '否',
            1: '是',
        }
    },
    {
        label: '申请人',
        prop: 'applyUserName',
        width: 200
    },
    {
        label: '职位',
        prop: 'position',
        width: 200
    },
    {
        label: '申请理由',
        prop: 'applyRemark',
        width: 200
    },
    {
        label: '申请时间',
        prop: 'applyTime',
        width: 200
    },
    {
        label: '操作',
        prop: 'operate'
    }
])
const submitObj = ref({
    id: null as number | null,
    status: 1
})
const tableData = ref([] as ListDto[])
const isUp = ref(false)
const handlePageChange = () => {
    getData()
}
const handleSearch = () => {
    getData()
}
const getData = async () => {
    console.log(filterData.value.list.applyTime.value)
    const reg = new RegExp("-")
    let res = await queryCompanyProcessRecordApi({
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize,
        companyName: filterData.value.list.companyName.value,
        applyUserName: filterData.value.list.applyUserName.value,
        queryStartDate: filterData.value.list.applyTime.value ? filterData.value.list.applyTime.value[0] && (filterData.value.list.applyTime.value[0] as string).replace(reg, "") : '',
        queryEndDate: filterData.value.list.applyTime.value ? filterData.value.list.applyTime.value[1] && (filterData.value.list.applyTime.value[1] as string).replace(reg, "") : ''
    })
    pageInfo.value.total = res.totalCount as number
    tableData.value = res.list
}

const onSure = (id: number) => {
    console.log('通过');
    isUp.value = true
    submitObj.value.id = id as number
}
const onReject = (id: number) => {
    ElMessageBox.confirm(
        '确定驳回吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            await processPass({
                id: id,
                status: 2
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消驳回',
            })
        })
}
const processPass = async (obj: {
    id: number
    channelId?: number
    receiptId?: number
    status: number
}) => {
    let res = await processPassApi(obj)
    ElMessage
        .success({
            message: '操作成功'
        })
    await getData()
}
const onSuccess = async (val: { region: number, region1: number }) => {
    await processPass({
        ...submitObj.value as { id: number, status: number },
        channelId: val.region as number,
        receiptId: val.region1 as number
    })
}
onMounted(() => {
    getData()
})
</script>

<template>
    <el-card class="mb-16px">
        <filterComponentPro noEmit v-model:filter-data="filterData" @doSearch="handleSearch">
        </filterComponentPro>
    </el-card>
    <el-card>
        <tableComponent :table-header="tableHeader" :table-data="tableData" v-model:page-info="pageInfo"
                        @pageChange="handlePageChange">
            <template #applyUserName>
                <el-table-column prop="applyUserName" label="申请人" align="center" width="150">
                    <template #default="scope">
                        <el-popover placement="bottom" title="" :effect="'dark'" :width="200" trigger="hover"
                                    content="">
                            <div class="text-#ffffff text-center">手机号：{{ scope.row.phone }}</div>
                            <template #reference>
                                <div class="underline-black underline">{{
                                        scope.row.applyUserName
                                    }}
                                </div>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
            </template>
            <template #applyTime>
                <el-table-column prop="applyTime" label="申请时间" align="center" width="200">
                    <template #default="scope">
                        <div>{{ dayjs(scope.row.applyTime).format('YYYY-MM-DD HH:mm') }}</div>
                    </template>
                </el-table-column>
            </template>
            <template #operate>
                <el-table-column label="操作" fixed="right" width="150">
                    <template #default="scope">
                        <div class="flex items-center">
                            <el-button type="primary" link @click="onSure(scope.row.id)">通过</el-button>
                            <el-button type="danger" link @click="onReject(scope.row.id)">驳回</el-button>
                        </div>
                    </template>
                </el-table-column>
            </template>
        </tableComponent>
    </el-card>
    <CustomerSureDia @success="onSuccess" v-model:show="isUp"></CustomerSureDia>
</template>

<style scoped lang="scss">

</style>
